import React, {useState, useEffect} from 'react';
import {Table, Space, Button} from "antd";

import {PracticeApi} from '@api/index'

import './list.less'

export default () => {

    const [list, setList] = useState([])

    const [total, setTotal] = useState(0)
    const [pageSize, setPageSize] = useState(20)
    const [page, setPage] = useState(0)

    useEffect(() => {
        getPracticeList()
    }, [page, pageSize])

    const getPracticeList = async () => {
        let params = {
            page: page,
            pageSize: pageSize,
        }
        let ret = await PracticeApi.list(params);
        if (ret && ret.code === 200) {
            setList(ret.data.content || [])
            setTotal(ret.data.totalElements)
        }
    }

    const columns = [
        {
            title: '姓名',
            dataIndex: 'userName',
            key: 'userName',
            width: '20%',
        },
        {
            title: '开始时间',
            dataIndex: 'sexName',
            key: 'sexName',
            width: '10%',
        },
        {
            title: '结束时间',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '状态',
            dataIndex: 'stateName',
            key: 'stateName',
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
        },
    ];

    const pagination = {
        onChange: (page, pageSize) => {
            setPageSize(pageSize)
            setPage(page - 1)
        },
        pageSize: pageSize,
        total: total
    }


    return (
        <div>
            <Table columns={columns} dataSource={list} pagination={pagination}/>
        </div>
    );
}
